<template>
  <div class="mybids">
    <ul>
      <div class="li1">
        <li class="titles">序号</li>
        <li>01</li>
        <li>02</li>
        <li>03</li>
        <li>04</li>
        <li>05</li>
        <li>06</li>
        <li>07</li>
        <li>08</li>
        <li>09</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
      </div>
      <div class="li2">
        <li class="titles">标的发布名称</li>
        <li>四川省交通建设集团有限责任公司智能化料场招标采购的公示</li>
        <li>校工会交互智能平板采购竞价成交公告</li>
        <li>平邑县图书馆馆藏图书及智能化设备采购项目中标结果公示</li>
        <li>三-智能电机-局部放电设备-招标招标公告ZB202304130003\n\n项目标名</li>
        <li>中电鸿信信息科技有限公司2023年警务室智能化改造项目单一来源采购方案公示</li>
        <li>海头镇宅基村土地发包项目</li>
        <li>先锋创业大楼(515-1室)60m²</li>
        <li>万达开绿色智能铸造产业园项目(二期)比选结果公告</li>
        <li>2023年度工伤基金结算支付智能审核监控项目竞争性磋商公告</li>
        <li>万达开绿色智能铸造产业园项目(三期)比选结果公告</li>
        <li>太原市迎泽区卫生局卫生监督所2023年4月至12月政府采购意向-公用经费项目</li>
        <li>侯马市第二中学校2023年4月至11月政府采购意向-城多义务教育补助经费中央资金</li>
        <li>太原市迎泽区卫生局卫生监督所2023年4月至12月政府采购意向-公用经费项目</li>
        <li>侯马市第二中学校2023年4月至8月政府采购意向-城多义务教育补助经费中央资金</li>
        <li>【次氨酸钠贮存罐修理】采购公告 附件</li>
      </div>
      <div class="li3">
        <li class="titles">投标结束时间</li>
        <li>2022-04-13</li>
        <li>2022-04-13</li>
        <li>2022-04-13</li>
        <li>2022-04-13</li>
        <li>2022-04-13</li>
        <li>2022-04-13</li>
        <li>2022-04-13</li>
        <li>2022-04-13</li>
        <li>2022-04-13</li>
        <li>2022-04-13</li>
        <li>2022-04-13</li>
        <li>2022-04-13</li>
        <li>2022-04-13</li>
        <li>2022-04-13</li>
        <li>2022-04-13</li>
      </div>
      <div class="li4">
        <li class="titles">状态</li>
        <li style="color: orange;">报名成功</li>
        <li style="color: orange;">报名成功</li>
        <li style="color: orange;">报名成功</li>
        <li style="color: orange;">报名成功</li>
        <li style="color: blue;">待开标</li>
        <li style="color: blue;">待开标</li>
        <li style="color: blue;">待开标</li>
        <li style="color: blue;">资质审核</li>
        <li>待开标</li>
        <li style="color: #17C2AA">开标结果</li>
        <li>已过期</li>
        <li>已过期</li>
        <li>已过期</li>
        <li>已过期</li>
        <li>已过期</li>
      </div>
      <div class="li5">
        <li class="titles">操作</li>
        <router-link to="/selfdo/tender-documents"><li>提交资料</li></router-link>          
        <router-link to="/selfdo/tender-documents"><li>提交资料</li></router-link>          
        <router-link to="/selfdo/tender-documents"><li>提交资料</li></router-link>          
        <router-link to="/selfdo/tender-documents"><li>提交资料</li></router-link>          
        <router-link to="/selfdo/tender-documents"><li>查看</li></router-link>          
        <router-link to="/selfdo/tender-documents"><li>查看</li></router-link>          
        <router-link to="/selfdo/tender-documents"><li>查看</li></router-link>          
        <router-link to="/selfdo/tender-documents"><li>查看</li></router-link>          
        <li><a href="#">等待报名</a></li>        
        <router-link to="/selfdo/tender-documents"><li>查看</li></router-link>    
        <li style="color: gray;">- -</li>
        <li style="color: gray;">- -</li>
        <li style="color: gray;">- -</li>
        <li style="color: gray;">- -</li>
        <li style="color: gray;">- -</li>
      </div>

    </ul>
  </div>
</template>

<script>
export default {
  name: 'MyBids',
};
</script>

<style>
.mybids {
  text-align: left;
  margin-left: 20px;
  width: 90%;
  height: auto;
  border: 1px solid #ccc;
  padding: 20px 20px 50px 20px;
  border-radius: 10px;
  font-size: 20px;
}

.mybids ul {
  list-style: none;
  margin: 10px;
  padding: 0;
  display: flex;
  flex-direction: row;
}

.mybids li {
  height: 50px;
  line-height: 30px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-left: none;
  border-right: none;
  border-top: none;
  box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.01);
  /* 下侧阴影 */
  display: flex;
  align-items: center;
}

.titles {
  background-color: #F6FDFD;
}

.li1 {
  width: 100px;
}

.li1 li {
  padding: 5px 0 5px 30px;
}

.li2 {
  width: 550px;
}

.li2 li {
  padding: 5px 0 5px 20px;
}

.li3 {
  width: 150px;
}

.li3 li {
  padding: 5px 0 5px 10px;
}

.li4 {
  width: 100px;
}

.li4 li {
  padding: 5px 0px 5px 10px;
}

.li5 {
  width: 100px;
}

.li5 li {
  padding: 5px 0 5px 10px;
}

.li5 a {
  text-decoration: none;
  color: #17C2AA;
}</style>